<template>
  <div>
    <el-row class="samples-info-box">
      <s-table
        v-loading="false"
        :column="tableData.column"
        :data="tableData.data"
        :header-cell-class-name="headerCellClass"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10,20,30,50]"
        :current-page.sync="queryList.page"
        :total="total"
        :page-size="queryList.pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
import sTable from '@/components/STable/s-table'
export default {
  components: {
    sTable
  },
  props: {
    dataObjects: {
      type: Object,
      required: true
    }
  },
  
  data() {
    return {
      // dataObjects: {},
      queryList: {
        page: '',
        pageSize: ''
      },
      // 单列表单
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: {
        column: [
          {
            prop: 'code',
            label: '关联编号',
            width: '200',
            fixed: true,
            render: (h, scope) => {
              return (
                <div
                  onClick={() => {
                    this.$router.push({ name: '/contractManage/contractCorrelation/detail', params: { tagsName: scope.row.name, type: 'detail', id: scope.row.id }})
                  }}
                >
                  <a style='color:#CEAB70;cursor:pointer'>{scope.row.code}</a>
                </div>
              )
            }
          },
          {
            prop: 'name',
            label: '合同名称',
            width: '200'
          },
          {
            prop: 'partyAName',
            label: '甲方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchAFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyAId }
                        })
                      }}
                    >
                      {scope.row.partyAName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyAName} </span>
                )
              }
            }
          },
          {
            prop: 'partyBName',
            label: '乙方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchBFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyBId }
                        })
                      }}
                    >
                      {scope.row.partyBName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyBName} </span>
                )
              }
            }
          },
          {
            prop: 'amount',
            label: '合同金额',
            align: 'right',
            width: '125',
            render: (h, scope) => {
              const num = (Number(scope.row.amount).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {
            prop: 'currency',
            label: '币种',
            width: '140'
          },
          {
            prop: 'classifyName',
            label: '合同分类'
            // width: '140'
          },
          {
            prop: 'typeName',
            label: '合同类型',
            width: '140'
          },

          {
            prop: 'createTime',
            label: '创建日期',
            width: '140'
          },
          {
            prop: 'statusName',
            label: '状态'
          },
          {
            prop: 'createUserName',
            label: '创建人'
          },
          {
            label: '操作',
            fixed: 'right',
            width: '56',
            render: (h, scope) => {
              return (
                <span>
                  <el-button
                    v-show={scope.row.statusName != '关联完成'}
                    type='text'
                    onClick={() => {
                      this.$router.push({ name: '/contractManage/contractCorrelation/edit', params: { type: 'edit', id: scope.row.id }})
                    }}>编 辑</el-button>
                </span>
              )
            }
          }
        ],
        data: [],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },

  computed: {},

  watch: {
    dataObjects: {
      handler: function(val, oldval) {
        console.log('父组件传过来的值', val)
        if (val != oldval) {
          this.getData()
          // this.$emit('Slist', this.searchList)
        }
      },
      immediate: true, // 关键
      deep: true
    }
  },

  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          console.log('wheel')
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    // window.onmousewheel = document.onmousewheel = function() {
    //   console.log('wheel')
    //   document.querySelector('#app').click()
    // }
  },
  // activated() {
  //   if (this.$route.query.isTag != true) {
  //     this.getList()
  //   }
  // },
  methods: {
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(column)
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    },
    getData() {
      this.tableData.data = this.dataObjects.records
      this.total = this.dataObjects.total
      this.queryList.page = this.dataObjects.current
      this.queryList.pageSize = this.dataObjects.size
    },
    // getList() {
    //   if (this.searchList.timeArr.length > 0) {
    //     this.searchList.time = this.searchList.timeArr[0] + '-' + this.searchList.timeArr[0]
    //   } else {
    //     this.searchList.time = ''
    //   }
    //   contractCorrelationApi.contractRelationPage(this.searchList).then(res => {
    //     console.log(res.data)
    //     if (res.code === 1) {
    //       alert(123)
    //       this.tableData.data = res.data.records
    //       // this.dataObjects = res.data
    //       this.total = res.data.total
    //       this.searchList.page = res.data.current
    //       this.searchList.pageSize = res.data.size
    //     }
    //   })
    // },
    handleSizeChange(val) {
      this.queryList.page = 1
      this.queryList.pageSize = val
      // this.getList()
      this.$emit('Slist', this.queryList)
    },
    handleCurrentChange(val) {
      this.queryList.page = val
      // this.getList()
      this.$emit('Slist', this.queryList)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
